<!--首次申诉-->
<template>
<div class="mod-config">
  <el-form :inline="true" :model="dataForm" @keyup.enter.native="search()">
    <el-form-item label="状态">
      <el-select v-model="dataForm.appealStatus" placeholder="全部">
        <el-option
          v-for="item in appealStatus"
          :key="item.val"
          :label="item.label"
          :value="item.val"
        ></el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="时间筛选">
      <el-select
        style="width:150px;"
        @change="dateChanged"
        v-model="dataForm.currentDate"
        placeholder="请选择"
      >
        <el-option v-for="item in dateSelect" :key="item" :label="item" :value="item"></el-option>
      </el-select>
      <template v-if="showDatePicker">
        <el-date-picker
          style="width:220px;"
          v-model="dataForm.startTime"
          type="datetime"
          :picker-options="datePickerOptions"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="开始时间"
        ></el-date-picker>~
        <el-date-picker
          style="width:220px;"
          v-model="dataForm.endTime"
          type="datetime"
          :picker-options="datePickerOptions"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="结束时间"
        ></el-date-picker>
      </template>
    </el-form-item>

    <el-form-item label="标签" v-if="true">
      <el-select v-model="dataForm.tagName" placeholder="全部">
        <el-option
          v-for="item in tagName"
          :key="item.val"
          :label="item.label"
          :value="item.val"
        ></el-option>
      </el-select>
    </el-form-item>

    <el-form-item>
      <el-input v-model="dataForm.nickname" placeholder="昵称" clearable></el-input>
    </el-form-item>
    <el-form-item>
      <el-input v-model="dataForm.phone" placeholder="手机号" clearable></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="search()">查询</el-button>
<!--      <el-button type="primary" @click="download()">下载数据</el-button>-->
    </el-form-item>
  </el-form>

  <!--    列表-->
  <el-table :data="dataList" border v-loading="dataListLoading" style="width: 100%;">
    <!--<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>-->
    <el-table-column prop="nickname" header-align="center" align="center" label="昵称"></el-table-column>
    <el-table-column prop="coverUrl" header-align="center" align="center" label="头像">
      <template slot-scope="scope">
        <img :src="scope.row.avatar" style="width: 40px;height: 40px;" />
      </template>
    </el-table-column>
    <el-table-column prop="phone" header-align="center" align="center" label="手机号"></el-table-column>
    <el-table-column prop="userGrade" header-align="center" align="center" label="会员身份">
      <template slot-scope="scope">
        {{scope.row.userGrade==1 ?'会员':''}}
        {{scope.row.userGrade==2 ?'经理':''}}
        {{scope.row.userGrade==3 ?'总监':''}}
      </template>
    </el-table-column>
    <el-table-column prop="tagName" header-align="center" align="center" label="标签">
      <template slot-scope="scope">
        <span>{{ scope.row.tagName === null ? '-' : scope.row.tagName}}</span>
      </template>
    </el-table-column>
    <el-table-column prop="valueConceptTotalScore" header-align="center" align="center" label="价值观总得分"></el-table-column>
    <el-table-column prop="selfEvaluationScore" header-align="center" align="center" label="自评">
      <template slot-scope="scope">
        <span>{{scope.row.selfEvaluationScore}}</span>
        <span>{{scope.row.selfIsDefaultScore===1?"(默认)":""}}</span>
      </template>
    </el-table-column>
    <el-table-column prop="superiorEvaluationScore" header-align="center" align="center" label="管家评价">
      <template slot-scope="scope">
        <span>{{scope.row.superiorEvaluationScore}}</span>
        <span>{{(scope.row.hasSuperior===1)?"":"(无管家)"}}</span>
        <span>{{(scope.row.hasSuperior===1 && scope.row.superiorIsDefaultScore===1)?"(默认)":""}}</span>
      </template>
    </el-table-column>
    <el-table-column prop="staffMemberEvaluationScore" header-align="center" align="center" label="运营评价结果">
      <template slot-scope="scope">
        <span>{{scope.row.staffMemberEvaluationScore}}</span>
        <span>{{(scope.row.staffMemberIsDefaultScore===1)?"(默认)":""}}</span>
      </template>
    </el-table-column>
    <el-table-column prop="assistEvaluationScore" header-align="center" align="center" label="管家服务考核总得分">
      <template slot-scope="scope">
        <span>{{scope.row.assistEvaluationScore}}</span>
        <span>{{(scope.row.hasSubordinate===1)?"":"(无下级)"}}</span>
      </template>
    </el-table-column>
    <el-table-column prop="valueConceptGrade" header-align="center" align="center" label="价值观考核等级">
      <template slot-scope="scope">
        <span>{{ scope.row.valueConceptGrade === 0 ? '未评' : '' }}</span>
        <span>{{ scope.row.valueConceptGrade === 1 ? '优秀' : '' }}</span>
        <span>{{ scope.row.valueConceptGrade === 2 ? '良好' : '' }}</span>
        <span>{{ scope.row.valueConceptGrade === 3 ? '待提升' : '' }}</span>

      </template>
    </el-table-column>
    <el-table-column prop="assistEvaluationGrade" header-align="center" align="center" label="管家服务考核等级">
      <template slot-scope="scope">
        <span>{{ scope.row.assistEvaluationGrade === 0 ? '未评' : '' }}</span>
        <span>{{ scope.row.assistEvaluationGrade === 1 ? '优秀' : '' }}</span>
        <span>{{ scope.row.assistEvaluationGrade === 2 ? '良好' : '' }}</span>
        <span>{{ scope.row.assistEvaluationGrade === 3 ? '待提升' : '' }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="ratio" header-align="center" align="center" label="提交申请本季度提现服务系数"></el-table-column>
    <el-table-column prop="appealStatus" header-align="center" align="center" label="申诉状态">
      <template slot-scope="scope">
        <span style="color: #aa1111">{{ scope.row.appealStatus === 0 ? '待审核' : '' }}</span>
        <span>{{ scope.row.appealStatus === 1 ? '申诉成功' : '' }}</span>
        <span>{{ scope.row.appealStatus === 2 ? '申诉失败' : '' }}</span>
        <span>{{ scope.row.appealStatus === 3 ? '申诉超时' : '' }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="gmtCreate" header-align="center" align="center" label="提交审核时间"></el-table-column>
    <el-table-column header-align="center" align="center" label="操作">
      <template slot-scope="scope">
        <el-button type="text" size="small" @click="appealAction(scope.row.appealStatus,scope.row.appealId)">
          {{scope.row.appealStatus === 0 ? '申诉审核': '修改考核成绩'}}</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    @size-change="sizeChangeHandle"
    @current-change="currentChangeHandle"
    :current-page="pageIndex"
    :page-sizes="[10, 20, 50, 100]"
    :page-size="pageSize"
    :total="totalPage"
    layout="total, sizes, prev, pager, next, jumper"
  ></el-pagination>

  <appeal-result-view ref="appealResult" @goback="goBack()"></appeal-result-view>
<!--  <appeal-result-modify ref="appealModify" @goback="goBack()"></appeal-result-modify>-->
  <appeal-score-modify ref="appealModify" @goback="goBack()"></appeal-score-modify>
</div>
</template>

<script>
    import AppealResultView from "./appealResultView";
    import AppealResultModify from "./appealResultModify";
    import AppealScoreModify from "./appealScoreModify";
    export default {
        name: "firstAppeal",
        components: {AppealScoreModify, AppealResultModify, AppealResultView},
        data() {
            return {
                showDatePicker: false,
                //  状态
                appealStatus: [
                    {
                        val: null,
                        label: "全部"
                    },
                    {
                        val: "0",
                        label: "待审核"
                    },
                    {
                        val: "2",
                        label: "申诉失败"
                    },
                    {
                        val: "1",
                        label: "申诉成功"
                    },
                    {
                        val: "3",
                        label: "申诉超时"
                    },

                ],
                // 时间筛选
                dateSelect: [
                    '全部',
                    "昨日",
                    "本周",
                    "上周",
                    '本月',
                    "最近30天",
                    "上月",
                    "自定义"
                ],
                datePickerOptions: {
                    disabledDate (time) {
                        return (
                            time.getTime() > Date.now() ||
                            time.getTime() < Date.now() - 30 * 24 * 60 * 60 * 1000
                        );
                    }
                },
                // 标签
                tagName: [
                    {
                        val: "0",
                        label: "全部"
                    },
                    {
                        val: "1",
                        label: "一组"
                    },
                    {
                        val: "2",
                        label: "二组"
                    }
                ],

                dataForm: {

                },
                userId: "",
                dataList: [],
                pageIndex: 1,
                pageSize: 10,
                totalPage: 0,
                dataListLoading: false,
                addOrUpdateVisible: false,
                bookmanages: true
            };
        },

        mounted() {
            this.getDataList();
            this.getTagNameDataList();
        },

        methods:{

            search(){
                this.pageIndex = 1;
                this.getDataList();
            },
            // 获取数据列表
            getDataList() {
                this.dataListLoading = true;
                let obj = {
                    page: this.pageIndex,
                    limit: this.pageSize,
                    appealType:"1"
                };

                // 状态
                if (this.dataForm.appealStatus) {
                    obj.appealStatus = this.dataForm.appealStatus;
                }

                if (this.dataForm.currentDate) {
                    obj.startTime = this.dataForm.startDate;
                    obj.endTime = this.dataForm.endDate;
                }
                //
                if (this.dataForm.tagName) {
                    obj.tagId = this.dataForm.tagName;
                }
                if (this.dataForm.nickname) {
                    obj.nickname = this.dataForm.nickname;
                }
                if (this.dataForm.phone) {
                    obj.phone = this.dataForm.phone;
                }


                this.$http({
                    url: this.$http.adornUrl("/value/valueappeallog/list"),
                    method: "get",
                    params: this.$http.adornParams(obj)
                }).then(({ data }) => {
                    if (data && data.code === 0) {
                        this.dataList = data.page.list;
                        this.totalPage = data.page.totalCount;
                    } else {
                        this.dataList = [];
                        this.totalPage = 0;
                    }
                    this.dataListLoading = false;
                });
            },

            appealAction(appealStatus,appealId) {

                // this.$refs.appealModify.init(appealId,false);
                this.$nextTick(() => {

                    if (appealStatus === 0) {
                        // 申诉审核
                        this.$refs.appealResult.init(appealId,false);
                    } else {
                        // 修改审核成绩
                        this.$refs.appealModify.init(appealId,false);
                    }

                });
            },
            //时间select change事件
            dateChanged(val) {
                let obj = {};
                if (val === "全部"){
                    delete this.dataForm.startDate
                    delete this.dataForm.endDate
                    this.showDatePicker = false;
                    return false
                }
                if (val === "昨日") {
                    obj.preDay = 1;
                    obj.day = 0;
                } else if (val === "本周") {
                    let num = new Date().getDay();
                    if (num === 0) {
                        obj.preDay = 6;
                        obj.day = 6;
                    } else {
                        obj.preDay = num-1;
                        obj.day = 6;
                    }
                } else if (val === "上周") {
                    let num = new Date().getDay() === 0 ? 7 : new Date().getDay();
                    obj.preDay = num + 6;
                    obj.day = 6;
                } else if (val === "本月") {
                    let num = new Date().getDate();
                    obj.preDay = num - 1;
                    obj.day = num - 1;
                } else if (val === "最近30天") {
                    obj.preDay = 29;
                    obj.day = 29;
                } else if (val === "上月") {
                    let date = new Date();
                    let month = date.getMonth() - 1;
                    date.setMonth(month + 1);
                    date.setDate(0);
                    let monthNum = date.getDate();
                    let num = monthNum + new Date().getDate();
                    obj.preDay = num-1;
                    obj.day = monthNum-1;
                }

                if (val === "自定义") {
                    this.dataForm.startDate = "";
                    this.dataForm.endDate = "";
                    this.showDatePicker = true;
                    return;
                } else {
                    let timeDate = this.getDateData(obj);
                    console.log("timeDate====>", timeDate);
                    this.dataForm.startDate = timeDate.startDate;
                    console.log("this.dataForm.endDate====>", timeDate.endDate);
                    this.dataForm.endDate = timeDate.endDate;
                    // if (val === "本周" || val === "最近30天") {
                    //   this.dataForm.endDate = new Date();
                    // } else {
                    //   this.dataForm.endDate = timeDate.endDate;
                    // }
                }
                this.showDatePicker = false;
            },
            getDateData(data) {
                let obj = {};
                obj.startDate = "";
                obj.endDate = "";
                if (data && data.preDay + "") {
                    let time = Date.now();
                    let startDate = getDateText(time - data.preDay * 24 * 3600 * 1000);
                    let endDate = getDateText(
                        time - data.preDay * 24 * 3600 * 1000 + data.day * 24 * 3600 * 1000
                    );
                    obj.startDate = startDate;
                    obj.endDate = endDate;
                }

                function getDateText(timeMinutes) {
                    let date = new Date(timeMinutes);
                    let year = date.getFullYear();
                    let month =
                        date.getMonth() > 8
                            ? date.getMonth() + 1
                            : "0" + (date.getMonth() + 1);
                    let dayText =
                        date.getDate() > 9 ? date.getDate() : "0" + date.getDate();
                    console.log(dayText)
                    return year + "-" + month + "-" + dayText;
                }
                return obj;
            },

            // 获取数据列表
            getTagNameDataList() {
                let obj = {
                    page: this.pageIndex,
                    limit: 100
                };

                this.$http({
                    url: this.$http.adornUrl("/value/tag/list"),
                    method: "get",
                    params: this.$http.adornParams(obj)
                }).then(({ data }) => {
                    if (data && data.code === 0) {
                        if (data.page.list) {
                            let tagNameList = []
                            data.page.list.map(item =>{
                                let tagNameObject = {
                                    val:item.id,
                                    label:item.tagName
                                }
                                tagNameList.push(tagNameObject)
                            })

                            tagNameList.unshift({val:null,label:"全部"})


                            this.tagName = tagNameList
                        }
                    }
                });
            },

            goBack () {
                this.getDataList()
            },

            // 每页数
            sizeChangeHandle(val) {
                this.pageSize = val;
                this.pageIndex = 1;
                this.getDataList();
            },
            // 当前页
            currentChangeHandle(val) {
                this.pageIndex = val;
                this.getDataList();
            },

        }
    }
</script>

<style scoped>

</style>
